<template>
	<view class="list-box">
		<scroll-view scroll-x class="head flex items-center justify-around">
			<view class="head-item" v-for="(item,index) in list" :key="index"
				@click="handleSelect(index)">
				<text :class="{
				'head-item-active':cuurentIndex == index
			}" class="flex justify-center">{{item.dictLabel}}</text>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="content-box">
			<view class="content-item flex" v-for="(i, ii) in dataList" :key="ii" @click="enterDetail(i)">
				<img :src="i.headImg || '../../static/default-head.png'" alt="">
				<view class="info-box">
					<view class="name" @click="enterDetail(i)">{{ i.title }}</view>
					<scroll-view scroll-x class="tag-box" :style="{overflow: 'auto'}">
						<view class="tag" v-for="tag in i.tags" :key="tag">{{ tag }}</view>
					</scroll-view>
					<view class="address">{{ i.address || '' }}</view>
				</view>
				<view class="dist">{{ i.dist }}</view>
				<view class="btn flex items-center" @click.stop="openLoadction(i)">
					<img src="../../static/daohang.png" alt="">
					<text>导航</text>
				</view>
			</view>
		</scroll-view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				list: [],
				dataList: [],
				cuurentIndex: 0
			};
		},
		components: {
			Loading
		},
		methods: {
			openLoadction(i){
				this.$request('/api/hlx-building/addNavigationCount', {
					id: uni.getStorageSync('userId')
				},'get')
				uni.openLocation({
					longitude:Number(i.positioningLng),
					latitude:Number(i.positioningLat),
					name:i.title,
					address:i.address
				})
			},
			getList() {
				request('/api/hlx-building/listPage', { types: this.list[this.cuurentIndex].dictValue }, 'get').then(res => {
					console.log('res', res)
					if (res.data.code === 200) {
						this.dataList = res.data.rows.map(i => {
							i.tags = i.introductions ? i.introductions.split(' ') : [],
							i.dist = i.juli ? i.juli > 1000 ? `${i.juli / 1000} km` : `${i.juli} m` : ''
							return i
						})
						// 查询列表数据
						
					}
				})
			},
			handleSelect(index) {
				this.cuurentIndex = index
				this.getList()
			},
			enterDetail(item) {
				uni.navigateTo({
					url: `/pages/listDetail/listDetail?id=${item.id}&title=${item.title}`
				})
			},
		},
		onLoad() {
			this.$refs.loading.init()
			this.$refs.loading.progress = 100
			// setTimeout(() => {
			// 	this.$refs.loading.destoryed()
			// }, 1000)
			request('/api/type/business_type', {  }, 'get').then(res => {
				console.log('res2', res)
				this.$refs.loading.destoryed()
				if (res.data.code === 200) {
					this.list = res.data.data
					// 查询列表数据
					this.getList()
				}
			})
		}
	}
</script>

<style>
	.list-box {
		height: 100vh;
	}

	.list-box .head {
		height: 76rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		white-space: nowrap;
	}

	.list-box .head-item {
		display: inline-block;
		margin-left: 15rpx;
		width: 150rpx;
		/* flex: 1; */
		line-height: 44rpx;
		color: #000000;
		font-size: 28rpx;
		opacity: 1;
	}

	.list-box .head-item>text {
		width: 132rpx;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}

	.list-box .head-item-active {
		background: #006FF2;
		color: #fff;
	}

	.list-box .content-box {
		height: calc(100% - 76rpx);
	}

	.list-box .content-box .content-item {
		position: relative;
		height: 213rpx;
		border-bottom: 1rpx solid #ccc;
		padding: 30rpx 0 34rpx 24rpx;
	}

	.list-box .content-box .content-item .info-box {
		width: 400rpx;
	}

	.list-box .content-box .content-item>img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	.list-box .content-box .content-item .name {
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		line-height: 44rpx;
		margin-bottom: 14rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list-box .content-box .content-item .tag-box {
		height: 50rpx;
		white-space: nowrap;
	}
	.list-box .content-box .content-item .tag {
		display: inline-block;
		font-size: 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		padding: 0 14rpx;
		background: #F4F4F4;
		border-radius: 700rpx;
		margin-right: 16rpx;
	}

	.list-box .content-box .content-item .address {
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
		margin-top: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 400rpx;
	}

	.list-box .content-box .content-item .dist {
		position: absolute;
		top: 48rpx;
		right: 42rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
	}

	.list-box .content-box .content-item .btn {
		position: absolute;
		right: 34rpx;
		bottom: 38rpx;
		width: 120rpx;
		height: 44rpx;
		background: #006FF2;
		border-radius: 44rpx;
		padding-left: 20rpx;
	}

	.list-box .content-box .content-item .btn>img {
		width: 24rpx;
		height: 24rpx;
	}

	.list-box .content-box .content-item .btn>text {
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-left: 8rpx;
	}
</style>